import React, { useState } from 'react';
import './index.less';
import dayjs from 'dayjs';
import './demo.less';
import { Calendar } from 'antd-mobile';
import { Divider } from 'antd';
import { FireFill, StarOutline } from 'antd-mobile-icons';
import {
  HomeOutlined,
  SwapOutlined,
  DownOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import { history } from 'umi';
export default function index() {
  const today = dayjs();
  const [val, setVal] = useState<[Date, Date] | null>(() => [
    today.subtract(0, 'day').toDate(),
    today.add(0, 'day').toDate(),
  ]);
  return (
    <div className="all">
      <div className="header">
        <p
          onClick={() => {
            history.push('/');
          }}
        >
          <HomeOutlined />
        </p>
        <h2>婚礼吉日</h2>
      </div>
      <div className="cons">
        <ul>
          <li>
            <SwapOutlined
              style={{
                padding: '0.04rem 0.04rem',
                backgroundColor: 'rgb(249, 91, 105, 0.8)',
                borderRadius: '50%',
              }}
            />{' '}
            排行榜
          </li>
          <li>
            2023年3月
            <DownOutlined />
          </li>
          <li>我的收藏</li>
        </ul>
      </div>
      <Calendar
        className="calendar-custom"
        selectionMode="single"
        value={val}
        onChange={(val) => {
          setVal(val);
        }}
      />
      <div className="bottomss">
        <div className="bottomlan">
          <p>
            全国共<span>3947</span>对新人结婚，热度
            <FireFill style={{ color: 'red' }} />
            <FireFill style={{ color: 'red' }} />
            <FireFill style={{ color: 'red' }} />
            <FireFill style={{ color: 'red' }} />
          </p>
          <ul className="two">
            <li>
              <span style={{ backgroundColor: 'rgb(255, 175, 36)' }}>平</span>{' '}
              嫁娶
            </li>
            <li>
              <span style={{ backgroundColor: 'rgb(70, 215, 136)' }}>宜</span>{' '}
              订婚
            </li>
            <li>
              <span style={{ backgroundColor: 'rgb(70, 215, 136)' }}>宜</span>{' '}
              彩礼
            </li>
            <li>
              <span style={{ backgroundColor: 'rgb(255, 175, 36)' }}>平</span>{' '}
              纳婿
            </li>
          </ul>
          <br />
          <p>2023年03月01日 二月初十 周三</p>
          <br />
          <Divider style={{ marginTop: '-0.28rem' }} />
          <ul className="three">
            <li>
              <StarOutline style={{ color: 'red' }} /> 收藏待选
            </li>
            <li style={{ color: '#ddd' }}>|</li>
            <li>
              <ShareAltOutlined style={{ color: 'red' }} /> 分享吉日
            </li>
          </ul>
          <br />
          <button>抢订热门档期</button>
        </div>
        <p className="ppps">本服务由婚礼纪大数据提供</p>
      </div>
    </div>
  );
}
